<template>
    <div class="top-header">
        <div class="page-desc">
            <img class="page-desc-img" src="./img/newlogo.png" />
            <i
                :title="showNavSec ? '收起子菜单' : '展开子菜单'"
                :class="['flag_icon', showNavSec ? 'el-icon-s-grid' : 'el-icon-menu']"
                @click="changeNav"
            ></i>
			<i
                class="flag_icon el-icon-refresh-right"
                @click="$store.commit('SET_REFRESH')"
                title="刷新"
            ></i>
            <div class="page-desc-text" v-if="$store.getters['pageCenterTitle']==''">
                <div class="page-desc-text-chinese">欢迎来到车家佳运营管理平台</div>
                <!-- <div class="page-desc-text-english">
                    Operation Management Platform
                </div> -->
            </div>
        </div>
        <div class="page-center-title">{{$store.getters['pageCenterTitle']}}</div>
        <div class="user-info">
            <el-dropdown
                :hide-on-click="false"
                placement="bottom"
                @command="quit">
                <span class="el-dropdown-link">
                    <img
                        class="user-info-img"
                        src="./img/defaultHeaderImg.png"
                    />
                    <span class="user-info-name">{{
                        $store.state.user_info.admin_name
                    }}</span>
                </span>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {
    name: "top-header",
    data() {
        return {
            
        }
	},
	computed:{
		showNavSec(){
			return this.$store.state.showNavSec
		}
	},
    methods: {
        changeNav() {
			this.$store.commit('CHANGE_NAV');
        },
        quit(val) {
            //退出登录
            if (val === "1") {
                this.$http
                    .post("/admin/login/index.php?act=login&op=logout")
                    .then(res => {
                        if (res.code === 1) {
                            this.$store.commit("SET_USERINFO", {});
			                this.$store.commit("SET_MENUS", false);
                            window.location.href = '/sign-in' // 退出跳转达到刷新的目的，防止用户浏览器未关闭而系统此时又更新了，退出再登录无法更新页面缓存
                            // this.$router.push("/sign-in");
                        }
                    });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
@import "@/common/scss/variable.scss";
.top-header {
    height: 100%;
    background-color: #182b5c;
    padding-left: 5px;
    padding-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .page-desc {
        display: flex;
        align-items: center;
        &-img {
            // width: 60px;
            height: 36px;
            // margin-right: 12px;
             margin-left: 60px;
			 margin-right: 50px;
        }
        &-text {
            color: #fff;
            text-align-last: justify;
            -moz-text-align-last: right;
            padding-left: 20px;
            &-chinese {
                font-size: 14px;
                line-height: 14px;
                font-weight: bold;
            }
            &-english {
                font-size: $font-size-small-ss;
                line-height: 12px;
                margin-top: 2px;
            }
        }
        .flag_icon {
            color: #fff;
            font-size: 22px;
            margin-right: 25px;
            cursor: pointer;
        }
    }
    .page-center-title {
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        width: 250px;
        margin-left: 45px;
    }
    .user-info {
        position: relative;
        display: block;
        display: flex;
        align-items: center;
        margin-bottom: 1px;
        .el-dropdown-link {
            display: flex;
            vertical-align: middle;
        }
        &-img {
            width: 34px;
            height: 34px;
            display: block;
            img { width: 100%;}
        }
        &-options {
            background-color: #fff;
            list-style-type: none;
            padding-left: 0;
            margin-top: 0;
            margin-bottom: 0;
            position: absolute;
            left: 0;
            top: 100%;
            display: none;
            &-item {
                min-width: 50px;
                padding: 6px;
                &-operation {
                    cursor: pointer;
                }
            }
        }
        /* &:hover {
                .user-info-options {
                    display: block;
                }
            } */
        .user-info-name {
            line-height: 34px;
            margin-left: 14px;
            color: #ffffff;
        }
    }
}
</style>